<template>
  <div class="alone-outBox f14">
    <div class="alone-topBox mb16">
      <div class="flex flex-warp flex_bt">
        <div class="flex flex-warp" style="align-items:center">
          <div class="mb16 mr16">
            <span>权限类型：</span>
            <el-select v-model="searchObj.consumeType" placeholder="请选择" class="width200" clearable
              @change="changestatus">
              <el-option v-for="item in consumeTypeList" :key="item.name" :label="item.name" :value="item.value" />
            </el-select>
          </div>
          <div class="mb16 mr16">
            <span>状态：</span>
            <el-select v-model="searchObj.isDown" placeholder="请选择" class="width200" clearable @change="changestatus">
              <el-option v-for="item in isDownList" :key="item.name" :label="item.name" :value="item.value" />
            </el-select>
          </div>
          <div class="mb16 mr16">
            <span>消耗时间：</span>
            <el-date-picker v-model="datatime" value-format="yyyy-MM-dd " type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div class="mb20">
            <el-button @click="React">重置</el-button>
            <el-button type="primary" @click="SearchListBt">筛选</el-button>
          </div>
        </div>
        <div>

        </div>
      </div>
    </div>

    <div class="tableBox">
      <div style="line-height: 30px;">
        银牌赞助剩余权限：{{ (rootData.sponsor_show_b_num-rootData.sponsor_show_b_num_used)+(rootData.sponsor_show_a_num-rootData.sponsor_show_a_num_used)+(rootData.sponsor_show_c_num-rootData.sponsor_show_c_num_used)+(rootData.sponsor_show_a_else_num-rootData.sponsor_show_a_else_num_used)+(rootData.sponsor_show_b_else_num-rootData.sponsor_show_b_else_num_used) }} 
        金牌赞助剩余权限：{{ (rootData.sponsor_meet_c_num-rootData.sponsor_meet_c_num_used)+(rootData.sponsor_meet_b_num-rootData.sponsor_meet_b_num_used)+(rootData.sponsor_meet_a_num-rootData.sponsor_meet_a_num_used) }} 
        <!-- 金牌赞助剩余权限：{{ rootData.sponsor_gold_num-rootData.sponsor_gold_num_used  }} -->
         钻石赞助剩余权限：{{ rootData.sponsor_diamond_num-rootData.sponsor_diamond_num_used }}
      </div>
      <div style="line-height: 30px;margin-bottom:15px">
        专属定制会剩余权限：{{rootData.custom_big_meet_num-rootData.custom_big_meet_num_used}} 
        高级专属定制会剩余权限：{{rootData.custom_high_meet_num-rootData.custom_high_meet_num_used}} 
        厂商会剩余权限：{{rootData.custom_small_meet_num-rootData.custom_small_meet_num_used}} 
        自助厂商会剩余权限：{{ rootData.self_meet_num - rootData.self_meet_num_used }} 
        自助上传视频上架剩余权限：{{ rootData.self_video_num - rootData.self_video_num_used }}
      </div>
      <!-- 表格 -->
      <el-table v-loading="loading" :data="DataTable" style="width: 100%" max-height="620"
        :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column prop="create_time" label="时间" :formatter="formatDate" align="left">
        </el-table-column>
        <el-table-column prop="num" label="权限个数" align="left" />
        <el-table-column prop="service_id" label="权限类型" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.service_id == 56 || scope.row.service_id == 57 || scope.row.service_id == 58">
              银牌赞助
            </div>
            <div v-if="scope.row.service_id == 82 || scope.row.service_id == 83">
              银牌赞助-会议详情banner广告1年
            </div>
            <div v-if="scope.row.service_id == 84 || scope.row.service_id == 85">
              银牌赞助-直播间播放宣传片2次
            </div>
            <div v-if="scope.row.service_id == 86 || scope.row.service_id == 87">
              银牌赞助-直播间banner广告
            </div>
            <div v-if="scope.row.service_id == 88 || scope.row.service_id == 89">
              银牌赞助-回放视频贴片广告
            </div>
            <div v-if="scope.row.service_id == 53 || scope.row.service_id == 54 || scope.row.service_id == 55">
              金牌赞助
            </div>
            <!-- <div v-if="scope.row.service_id == 65">
              金牌赞助
            </div> -->
            <div v-if="scope.row.service_id == 59">
              钻石赞助
            </div>
            <div v-if="scope.row.service_id == 72">
              专属定制会
            </div>
            <div v-if="scope.row.service_id == 81">
              高级专属定制会
            </div>
            <div v-if="scope.row.service_id == 80">
              厂商会
            </div>
            <div v-if="scope.row.service_id == 43">
              自助厂商会
            </div>
            <div v-if="scope.row.service_id == 45">
              自助上传视频
            </div>
            <div
              v-if="scope.row.service_id != 45 && scope.row.service_id != 43 && scope.row.service_id != 80 && scope.row.service_id != 81 && scope.row.service_id != 72 && scope.row.service_id != 59 && scope.row.service_id != 65
                && scope.row.service_id != 53 && scope.row.service_id != 54 && scope.row.service_id != 55 && scope.row.service_id != 56 && scope.row.service_id != 57 && scope.row.service_id != 58 && scope.row.service_id != 82
                && scope.row.service_id != 83 && scope.row.service_id != 84 && scope.row.service_id != 85 && scope.row.service_id != 86 && scope.row.service_id != 87 && scope.row.service_id != 88 && scope.row.service_id != 89">
              状态未知【{{ scope.row.service_id }}】
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="describe" label="明细" width="450" />
        <el-table-column prop="state" label="状态" width="80" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.state == 0">
              <span style='color:#e423c1f4'>增购</span>
            </div>
            <div v-if="scope.row.state == 1">
              <span style='color:#E6A23C'>赠送</span>
            </div>
            <div v-if="scope.row.state == 2">
              <span style='color:#67C23A'>消耗</span>
            </div>
            <div v-if="scope.row.state == 3">
              <span style='color:red;'>退回</span>
            </div>
            <div v-if="scope.row.state == 4">
              <span style='color:#cf29d2;'>兑换</span>
            </div>
          </template>
        </el-table-column>

      </el-table>

      <div class="alignRight">
        <Pagination :total="total" :page="searchObj.current" :limit="searchObj.limit" @pagination="paginations" />
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination/index.vue'
import Cookies from 'js-cookie'
import api from '@/api'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      activeName: 'first',
      datatime: [],
      searchObj: {
        imshowId: Cookies.get('imShowId')
          ? Cookies.get('imShowId')
          : '',
        keyWords: '',
        consumeType: '',
        isDown: '',
        limit: 10,
        current: 1,
        startTime: '',
        endTime: '',
        orderId: ''
      },
      total: 0,
      loading: false,
      reasonDia: false,
      returnReason: '',
      isDownList: [
        { name: '赠送', value: 1 },
        { name: '增购', value: 0 },
        { name: '消耗', value: 2 },
        { name: '退回', value: 3 },
        { name: '兑换', value: 4 }],
      consumeTypeList: [
        { name: '银牌赞助', value: 56 },
        { name: '金牌赞助', value: 53 },
        // { name: '金牌赞助', value: 65 },
        { name: '钻石赞助', value: 59 },
        { name: '专属定制会', value: 72 },
        { name: '高级专属定制会', value: 81 },
        { name: '厂商会', value: 80 },
        { name: '自助厂商会', value: 43 },
        { name: '自助上传视频', value: 45 }],
      classification: [
        { name: '待审核', value: 0 },
        { name: '已录用', value: 1 },
        { name: '已退回', value: 2 }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '今天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime())
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      DataTable: [],
      fileList: [],
      id: 33212,
      rootData: {}
    }
  },
  created() {
    this.getCompanyAllServiceNum()
  },
  mounted() {
    // this.getclassification();
    this.SearchList()

  },
  methods: {
    getCompanyAllServiceNum() {
      let form = {
        imshowId: this.$store.getters.imShowId,
      };
      api.common.getCompanyAllServiceNum(form).then((res) => {
        this.rootData = res.data
      });
    },
    // 格式时间
    formatDate(value) {
      this.value1 = new Date(value.create_time)// value.createdTime是prop绑定的字段名称
      const dateValue = this.$moment(Number(this.value1)).format('YYYY-MM-DD HH:mm:ss')// $moment专门转化时间的插件（使用时需要下载引入）
      return dateValue
    },
    // 改变推荐状态
    changetj(val, row) {
      const form = {
        paperId: row.id,
        recommend: val
      }
      api.solution.setPaperCommend(form).then((res) => {
        if (res.data > 0) {
          this.$message({ type: 'success', message: '修改推荐状态成功！' })
          this.SearchList()
        } else if (res.data == 0) {
          this.$message({ type: 'error', message: '推荐个数不足!' })
          this.SearchList()
        } else {
          this.$message({ type: 'error', message: '推荐权限未初始化!' })
          this.SearchList()
        }
      })
    },
    // 查看理由
    checkreason(val) {
      this.reasonDia = true
      this.returnReason = val.returnReason
    },
    // 改变状态
    changestatus() {
      this.SearchListBt()
    },
    // 删除
    deletePaper(val) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const form = {
            paperId: val.id,
            imshowId: Cookies.get('imShowId')
              ? Cookies.get('imShowId')
              : '0'
          }
          indexapi.solution.deletePaper(form).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.SearchList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取分类数据
    getclassification() {
      indexapi.DataCenter.paperSortLevel().then((res) => {
        this.classification = res.data
        this.SearchList()
      })
    },
    // 跳转
    openDialog(val) {
      window.open(
        `https://www.instrument.com.cn/netshow/${val.imshowID}/s${val.id}.htm`
      )
    },
    // 跳转2
    openDialog2(val) {
      window.open(
        `https://www.instrument.com.cn/application/Solution-${val.id}.html`
      )
    },
    // 跳转3
    openDialog3(val) {
      if (val.sampleUrl) {
        window.open(val.sampleUrl)
      }
    },
    // 编辑
    editPaper(val) {
      this.$router.push({ path: '/content/solutionscheme/solution/addoredit', query: { paperId: val.id, imshowId: val.imshowID } })
    },
    // 重置
    React() {
      this.searchObj = {
        imshowId: Cookies.get('imShowId')
          ? Cookies.get('imShowId')
          : '',
        orderId: '',
        consumeType: '',
        isDown: '',
        startTime: '',
        endTime: '',
        limit: 10,
        current: 1,
      }
      this.datatime = []
      this.SearchList()
    },
    // 查询
    SearchListBt() {
      this.searchObj.limit = 10
      this.searchObj.current = 1
      this.SearchList()
    },
    async SearchList() {
      this.loading = true
      if (this.datatime.length > 0) {
        this.searchObj.startTime = this.datatime[0]
        this.searchObj.endTime = this.datatime[1]
      }
      const list = await api.video.getCompanyServiceConsume(this.searchObj)
      this.DataTable = list.data.records
      this.total = list.data.total
      this.searchObj.current = list.data.current
      this.loading = false
    },
    // 分页
    paginations(val) {
      this.searchObj.limit = val.limit
      this.searchObj.current = val.page
      this.SearchList()
    },
    releaseInformation() {
      this.$router.push(`/content/solutionscheme/solution/addoredit`)
    }
  }
}
</script>
<style scoped>
.topButton {
  position: absolute;
  right: 20px;
  top: 16px;
}

.flex_bt {
  justify-content: space-between;
}

.icon_right {
  font-weight: 600;
  color: #0c7ff2;
  cursor: pointer;
  font-size: 18px;
}
</style>
  